<template>
  <div class="view_page userList">
    <el-card class="box-card">
      <!--卡片头部-->
      <div slot="header" class="clearfix">
        <!--左侧-->
        <div class="left">
          <div class="back-page">
            <div class="add-back" @click="back">
              <i class="fa fa-arrow-left" aria-hidden="true"></i>
              <span v-if="addtype == 'add'">添加模型文件</span>
              <span v-if="addtype == 'update'">修改模型文件</span>
            </div>
          </div>
        </div>
        <!-- 右侧-->
        <div class="right">
          <!-- <el-button type="primary" size="small" @click="save">保存 </el-button> -->
          <el-button type="primary" @click="save('add')" v-if="addtype == 'add'"
            >保存</el-button
          >
          <el-button
            type="primary"
            @click="save('update')"
            v-if="addtype == 'update'"
            >保存</el-button
          >
        </div>
      </div>
      <!-- 卡片内容 -->
      <div>
        <el-form :model="liveData" label-width="120px" class="inline-input">
          <el-form-item label="模型文件名称" :required="true">
            <el-select
              filterable
              v-model="liveData.modelId"
              placeholder="请选择模型"
			  disabled
            >
              <el-option
                v-for="item in modeData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
				
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模型版本名">
            <el-input
              v-model="liveData.modelName"
              placeholder="请输入模型版本名"
            ></el-input>
          </el-form-item>
          <el-form-item label="模型位置">
            <el-input
              v-model="liveData.position"
              placeholder="请输入模型位置"
            ></el-input>
          </el-form-item>
          <el-form-item label="模型旋转">
            <el-input
              v-model="liveData.rotation"
              placeholder="请输入模型旋转"
            ></el-input>
          </el-form-item>
          <el-form-item label="模型缩放">
            <el-input
              v-model="liveData.scale"
              placeholder="请输入模型缩放"
            ></el-input>
          </el-form-item>
          <el-form-item label="模型高亮物体名">
            <el-input
              v-model="liveData.highlight_name"
              placeholder="请输入模型高亮物体名"
            ></el-input>
          </el-form-item>
          <el-form-item label="模型扫描位置">
            <el-input
              v-model="liveData.modelScanningPosition"
              placeholder="请输入模型扫描位置"
            ></el-input>
          </el-form-item>
          <el-form-item label="模型扫描旋转">
            <el-input
              v-model="liveData.modelScanningRotation"
              placeholder="请输入模型扫描旋转"
            ></el-input>
          </el-form-item>
          <el-form-item label="模型扫描缩放">
            <el-input
              v-model="liveData.modelScanningScale"
              placeholder="请输入模型扫描缩放"
            ></el-input>
          </el-form-item>
          <el-form-item label="模型路径">
            <el-input
              v-model="liveData.abPath"
              placeholder="请输入模型路径"
            ></el-input>
          </el-form-item>
		  <el-form-item label="centerPos" >
		    <el-input v-model="liveData.centerPos" ></el-input>
		  </el-form-item>
          <el-form-item label="模型文件" v-if="addtype == 'add'" :required="true">
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="uploadUrl"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :data="uploadData"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarSuccess"
              :on-error="handleAvatarError"
              :auto-upload="true"
              :limit="1"
              :on-exceed="numberExceeded"
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取文件
              </el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="模型文件" v-if="addtype == 'update'">
            <el-table :data="fileList" style="width: 100%">
              <el-table-column
                prop="name"
                label="文件名称"
                align="center"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                min-width="230"
                align="center"
              >
                <template slot-scope="scope">
                  <div
                    style="display: flex;align-items: center;flex-wrap: wrap; "
                  >
                    <el-button
                      type="primary"
                      size="small"
                      @click="onlyLook(scope.row.url)"
                      >下载
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="liveData.has_enable" inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import { Message } from "element-ui";
import pagination from "@/components/common/pagination/pagination";
import devConfig from "*/dev.config";

export default {
  components: {
    pagination
  },
  watch: {},
  data() {
    return {
      // 筛选内容
      liveData: {
        modelId: "",
        modelName: "",
        position: "",
        rotation: "",
        scale: "",
        highlight_name: "",
        modelScanningPosition: "",
        modelScanningRotation: "",
        modelScanningScale: "",
        has_enable: false,
        file: "",
        abPath: ""
      },
      addtype: "", //类型 新增-修改

      uploadUrl: "https://dongping.jnaw.top/smxc/file/upload",
      // uploadUrl: this.$apis.getUploadUrl() + "/file/upload", //上传地址
      uploadData: {
        type: 1 //没用
      },
      fileList: [],
      file_id: "",

      modeData: [], //模型列表

      // 列表的数据
      datalist: [],
      allIndex: "",
      pageNum: 1,
      page: 1,
      size: 10,
      total: 0
    };
  },
  created() {
    var _this = this;
    _this.addtype = _this.$route.query.type;
    _this.getmodeList(); // 模型列表

    if (_this.addtype == "update") {
      _this.liveData = JSON.parse(_this.$route.query.data);
      // console.log("_this.liveData:", _this.liveData);

      _this.file_id = _this.liveData.file;
      _this.fileList = [
        {
          id: _this.liveData.file,
          name: _this.liveData.file_name,
          url: _this.liveData.file_url
        }
      ];
      // console.log("文件:", this.file_id,  this.fileList);
    }else{
		  _this.liveData.modelId =Number(JSON.parse(JSON.stringify(this.$route.query.modelId))) 
		  var dataEnable = JSON.parse(_this.$route.query.data)
		  if(dataEnable!=''&&dataEnable!=null&&dataEnable!=null){
			  this.liveData = dataEnable
			  this.liveData.has_enable = false
		  }
	}
  },
  mounted() {},
  methods: {
    onlyLook(url) {
      window.open(url);
    },
    // 模型下拉列表
    getmodeList() {
      var _this = this;
      var datas = {
        page: _this.page,
        size: 999
      };
      _this.$apis.u_model_list(datas).then(res => {
        if (res.result == 0) {
          _this.modeData = res.data;
        }
      });
    },
    save(addtype) {
      var _this = this;
      var datas = JSON.parse(JSON.stringify(this.liveData));
      // if (datas.type == "") {
      //   Message.error("请选择模型文件");
      //   return;
      // }
   //    if (datas.modelName == "") {
   //      Message.error("模型版本名不能为空");
   //      return;
   //    }
   //    if (datas.position == "") {
   //      Message.error("模型位置不能为空");
   //      return;
   //    }
   //    if (datas.rotation == "") {
   //      Message.error("模型旋转不能为空");
   //      return;
   //    }
   //    if (datas.scale == "") {
   //      Message.error("模型缩放不能为空");
   //      return;
   //    }
   //    if (datas.highlight_name == "") {
   //      Message.error("模型高亮物体名不能为空");
   //      return;
   //    }
   //    if (datas.modelScanningPosition == "") {
   //      Message.error("模型扫描位置不能为空");
   //      return;
   //    }
   //    if (datas.modelScanningRotation == "") {
   //      Message.error("模型扫描旋转不能为空");
   //      return;
   //    }
   //    if (datas.modelScanningScale == "") {
   //      Message.error("模型扫描缩放不能为空");
   //      return;
   //    }
   //    if (datas.abPath == "") {
   //      Message.error("模型路径不能为空");
   //      return;
   //    }
	  // if (datas.centerPos == "") {
	  //   Message.error("centerPos不能为空");
	  //   return;
	  // }
      if (_this.fileList.length == 0) {
        Message.error("模型文件不能为空");
        return;
      }
      datas.file = _this.file_id;

      // console.log("datas:", datas);
      if (addtype == "add") {
        _this.$apis.u_model_file_add(datas).then(res => {
          if (res.result == 0) {
            Message.success("添加成功");
            _this.$router.back();
          }
        });
      } else {
        datas.id = JSON.parse(_this.$route.query.data).id;
        _this.$apis.u_model_file_update(datas).then(res => {
          if (res.result == 0) {
            Message.success("修改成功");
            _this.$router.back();
          }
        });
      }
    },

    //上传文件
    submitUpload() {
      this.$refs.upload.submit();
    },
    //文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      // console.log("handleRemove===========", file, fileList);
      this.file_id = "";
      this.fileList = fileList;
    },
    //点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      // console.log(file);
    },
    //文件上传成功的钩子
    handleAvatarSuccess(res, file, fileList) {
      var _this = this;
      this.file_id = res.data.id;
      this.fileList = fileList;
    },
    //文件上传失败时的钩子
    handleAvatarError(err, file) {
      Message.error("文件上传失败，请稍后再试");
    },
    //文件超出一个
    numberExceeded() {
      Message.error("只能上传一个文件");
    },
    //上传文件之前的钩子
    beforeAvatarUpload(file) {
      // var typeList = ["image/jpeg", "image/png", "image/jpg","image/tif"];
      // const isJPG = file.type === 'image/jpeg'
      // const isJPG = typeList.includes(file.type);
      // const isLt2M = file.size / 1024 / 1024 < 10;
      // if (!isJPG) {
      // 	this.$message.error("上传图片只能是 JPG或者PNG 格式!");
      // }
      // if (!isLt2M) {
      // 	this.$message.error("上传文件大小不能超过 10MB!");
      // }
      // return isJPG
    },
    back() {
      this.$router.back();
    }
  }
};
</script>

<style scoped>
.el-table .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
}
</style>
